<template>
    <el-row>
        <el-row>
            <el-col :span="12">
                <el-button type="primary" @click="addProduct">新增商品</el-button>
            </el-col>
        </el-row>
        <el-row style="padding:20px;background:#f8f8f8;margin-top:24px">
            <el-col :span="12">
                <span style="font-size:14px">商品名称：</span>
                <el-input style="width:300px" v-model="search.keyword" placeholder="请输入商品名称"></el-input>
            </el-col>
            <el-col :span="12">
                <span style="font-size:14px">商品分组：</span>
                <el-select v-model="search.group_id">
                    <el-option v-for="(item,index) in groupData" :key="index" :label="item.name" :value="item.id">{{item.name}}</el-option>
                </el-select>
            </el-col>
            <el-col :span="12" style="margin-top:16px">
                <span style="font-size:14px">商品价格：</span>
                <el-input-number style="width:140px" controls-position="right" :min="0" v-model="search.price_start"></el-input-number>
                <span> - </span>
                <el-input-number style="width:140px" controls-position="right" :min="0" v-model="search.price_end"></el-input-number>
            </el-col>
            <el-col :span="24" style="margin-top:20px">
                <el-button type="primary" @click="searchProduct" style="margin-left:70px">搜索</el-button>
                <el-button type="text" @click="clearSearch">清空</el-button>
            </el-col>
        </el-row>
        <el-table :data="productData" stripe style="margin-top:24px" @selection-change="SelectionChange">
            <el-table-column type="selection" width="50">
            </el-table-column>
            <el-table-column label="商品" width="200" header-align="center">
                <template slot-scope="scope">
                    <div style="display:flex">
                        <img :src="scope.row.img_url" alt="" style="width:80px;height:80px">
                        <div style="flex:1;padding:2px 7px">
                            <div class="text_overflow text_overflow_line_2">{{scope.row.name}}</div>
                            <div style="color:#f50;margin-top:8px">¥ {{scope.row.sku_status && scope.row.sku.length ? scope.row.sku[0].price : scope.row.price}}</div>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="分组" header-align="center" align="center">
                <template slot-scope="scope">
                    <div v-if="scope.row.group.length">
                        <el-tag size="mini" type="success" v-for="(item,index) in scope.row.group" :key="index" style="margin:2px">{{item.group.name}}</el-tag>
                    </div>
                    <div v-else>-</div>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" header-align="center" align="center" width="150">
                <template slot-scope="scope">
                    <el-row>{{format(scope.row.created_at)}}</el-row>
                </template>
            </el-table-column>
            <el-table-column prop="rank" label="排序" header-align="center" align="center">
            </el-table-column>
            <el-table-column prop="status" label="状态" header-align="center" align="center">
                <template slot-scope="scoped">
                    <el-row style="font-weight:700;color:#19be6b" v-if="scoped.row.status">开启</el-row>
                    <el-row style="font-weight:700;color:#f50" v-else>关闭</el-row>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" header-align="center" width="100">
                <template slot-scope="scope">
                    <el-tooltip content="编辑">
                        <i class="iconfont icon-bianji1" @click='productEdit(scope.row)' style="font-size:26px;cursor:pointer;color:rgb(158, 167, 179)"></i>
                    </el-tooltip>
                    <el-tooltip content="删除">
                        <i class="iconfont icon-shanchu2" @click="productDel(scope.row)" style="font-size:26px;cursor:pointer;color:rgb(158, 167, 179)"></i>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <el-row style="margin:24px 0">
            <el-col :span="12">
                <el-button @click="selectionStatus(1)">上架</el-button>
                <el-button @click="selectionStatus(0)">下架</el-button>
            </el-col>
            <el-col :span="12" style="text-align:right">
                <el-pagination background layout="total,prev,pager,next" :total="pagination.rowCount" :page-size="pagination.pageSize" @current-change="changePage"></el-pagination>
            </el-col>
        </el-row>
    </el-row>
</template>

<script>
export default {
    layout: "shop",
    data() {
        return {
            productData: [],
            pagination: {},
            selectProduct: [],
            groupData: [],
            search: {
                keyword: "",
                group_id: "",
                price_start: "",
                price_end: ""
            }
        };
    },
    async asyncData({ app }) {
        let data = {};
        //分组
        const group = await app.$axios.$get(
            `/api/shop/home/shop/product/group/index`
        );
        if (group && group.errmsg === "ok") {
            data.groupData = group.data;
        }
        const product = await app.$axios.$get(
            "/api/shop/home/shop/product/product/index"
        );
        if (product && product.errmsg === "ok") {
            data.productData = product.data.data;
            data.pagination = product.data.pagination;
        }
        return data;
    },
    methods: {
        //商品列表
        async getProduct() {
            let url = `/api/shop/home/shop/product/product/index?page=${
                this.pagination.page
            }`;
            if (this.search.keyword) {
                url += `&keyword=${this.search.keyword}`;
            }
            if (this.search.group_id) {
                url += `&group_id=${this.search.group_id}`;
            }
            if (this.search.price_start || this.search.price_end) {
                let price_start =
                    this.search.price_start > this.search.price_end
                        ? this.search.price_end
                        : this.search.price_start;
                let price_end =
                    this.search.price_start < this.search.price_end
                        ? this.search.price_end
                        : this.search.price_start;
                url += `&price_start=${price_start}&price_end=${price_end}`;
            }
            const product = await this.$axios.$get(url);
            if (product && product.errmsg === "ok") {
                this.productData = product.data.data;
                this.pagination = product.data.pagination;
            }
        },
        changePage(page) {
            this.pagination.page = page;
            this.getProduct();
        },
        //新增
        addProduct() {
            this.$router.push({ path: "/shop/product/edit" });
        },
        //搜索
        searchProduct() {
            this.pagination.page = 1;
            this.getProduct();
        },
        clearSearch() {
            this.search = {
                keyword: "",
                group_id: "",
                price_start: "",
                price_end: ""
            };
            this.pagination.page = 1;
            this.getProduct();
        },
        //编辑
        productEdit(row) {
            this.$router.push({
                path: "/shop/product/edit",
                query: { id: row.id }
            });
        },
        //删除
        async productDel(row) {
            const res = await this.$axios.$get(
                `/api/shop/home/shop/product/product/del?id=${row.id}`
            );
            if (res && res.errmsg === "ok") {
                this.$message.success("已删除");
                this.getProduct();
            }
        },
        //上下架
        SelectionChange(val) {
            this.selectProduct = val;
        },
        async selectionStatus(status) {
            if (!this.selectProduct.length) {
                this.$message.warning("请选择商品");
                return;
            }
            let ids = [];
            for (let key in this.selectProduct) {
                ids.push(this.selectProduct[key].id);
            }
            const res = await this.$axios.$get(
                `/api/shop/home/shop/product/product/update?id=${ids.join()}&status=${status}`
            );
            if (res && res.errmsg === "ok") {
                this.$message.success(status ? "已上架" : "已下架");
                this.getProduct();
            }
        }
    }
};
</script>
